<template>
	<div class="couponList pl30 pr30">
		<div class="list" v-for="(obj,index) in list" :key='index'>
			<div class="title c-flex c-a-c">
				<div class="c-box-flex name">{{obj.name}}</div>
				<div>
					<div class="yellow">
						<span class="fs26">￥</span>
						<span style="font-size:0.6rem">10</span>
						<span style="font-size:0.48rem">.0</span>
					</div>
					<div class="c-999">无门槛使用</div>
				</div>
				<div class="checked" v-if='index==active'></div>
			</div>
			<div class="c-flex c-a-c" style="padding: 0 0.35rem 0 0.3rem;">
				<div class="c-box-flex c-999 fs24" style="line-height:0.74rem">有效期至：{{obj.time}}</div>
				<i v-if="obj.timeout" class="iconfont icon-yiguoqi c-999" style="font-size:0.5rem"></i>
			</div>
		</div>
	</div>

</template>

<script>
export default {
  name: "couponList",
  data() {
    return {
      active: 0,
      list: [
        {
          name: "优惠券",
          time: "2018-8-29",
          timeout: false
        },
        {
          name: "优惠券",
          time: "2018-8-29",
          timeout: false
        },
        {
          name: "优惠券",
          time: "2018-8-29",
          timeout: true
        },
        {
          name: "优惠券",
          time: "2018-8-29",
          timeout: false
        }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.list {
  width: 100%;
  height: 2.1rem;
  background: url("../../../assets/images/coupon-bg.png") no-repeat;
  background-size: cover;
  margin-top: 0.2rem;
  position: relative;
}

.title {
  width: 100%;
  height: 1.35rem;
  padding: 0.2rem 0.35rem 0 0.3rem;
}

.name {
  font-size: 0.36rem;
  color: #333;
}

.checked {
  width: 0.53rem;
  height: 0.53rem;
  background: url("../../../assets/images/coupon-checked.png") no-repeat;
  background-size: cover;
  position: absolute;
  right: 0.05rem;
  top: 0.02rem;
}
</style>
